import React, { useEffect } from 'react';
import { connect } from 'dva';
import { useDispatch, useSelector } from 'umi';
import { Button, Checkbox, Form, Input } from 'antd';
import Banner from '@/assets/images/banner.png';
import Logo from '@/assets/images/logo.png';
import Name from '@/assets/images/name.png';
import './index.less';

const Login = function ({ userInfo, userLogin }) {
  const onFinish = (values) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  
  const dispatch = useDispatch();
  const dva = useSelector(state => state.fetchList.name);
  console.log('dva', dva);

  useEffect(() => {
    
    // dispatch(
    //   {
    //     type: 'fetchList/fetchCates',
    //     payload: {
    //       tab: '',
    //       page: 1,
    //       limit: 5
    //     }
    //   }
    // )

  }, []);
  return (
    <div className="content">
      <img className="banner" src={Banner} alt="" />
      <p className="con_logo">
        <img className="logo" src={Logo} alt="" />
        <div className="login">
          <div className="word">
            <span className="sp1">登录</span>
            <span className="sp2">LOGIN</span>
            <span className="line"></span>
          </div>
          <div className="login_con">
            <p className="inp">
              <Input allowClear placeholder="用户名" />
            </p>
            <p className="inp2">
              <Input allowClear placeholder="密码" />
            </p>
            <p className="btn">
              <Button type="primary">登录</Button>
            </p>
            <p className="btn2">
              <Button type="primary">取消</Button>
            </p>
            <img className="name" src={Name} alt=""></img>
          </div>
        </div>
      </p>
    </div>
  )
};

export default connect(
  ({ ums }) => ({
    userInfo: ums.userInfo,
  }),
  (dispatch) => ({
    userLogin: (payload) => dispatch({ type: 'ums/userLogin', payload }),
  }),
)(Login);
